<#import '/ftlLibrary/properteisVariable.ftl' as pv/>
<link href='assets/css/fullcalendar/fullcalendar.css' rel='stylesheet'/>
<script src='assets/js/fullcalendar/fullcalendar.js'></script>
<!--<script src='assets/js/fullcalendar/jquery-ui.custom.min.js'></script>-->
<style>
    .fc-event-title {
        color: blue;
    }

    .fc-event-hori {
        background-color: red;
    }

    .modal-body {
        padding: 0px !important;
    }

    .modal-body > .bootbox-close-button {
        display: none;
    }

    .bootbox-close-button {
        width: 19px;
        height: 19px;
        border: none;
        cursor: pointer;
        -webkit-appearance: none;
        float: right;
        top: 4px;
        left: -5px;
        position: relative;
        background: #E9F5FF url("assets/img/nav-img/icon_close.png") no-repeat 0 0;
    }

    .tssTranstiClassesListDialog .modal-dialog{
        width: 60%;
        min-width: 1000px;
    }
    input[type=checkbox]{
        opacity: 0;
        position: absolute;
        left: -9999px;
        z-index: 12;
        width: 18px!important;
        height: 18px!important;
        cursor: pointer;
    }
</style>
<script>


    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    function getBeforeDate(n, inputval) {
        var n = n;
        var date = new Date(inputval);
        var year = date.getFullYear();
        var mon = date.getMonth() + 1;
        var day = date.getDate();
        if (day <= n) {
            if (mon > 1) {
                mon = mon - 1;
            }
            else {
                year = year - 1;
                mon = 12;
            }
        }
        date.setDate(date.getDate() + n);
        year = date.getFullYear();
        mon = date.getMonth() + 1;
        day = date.getDate();
        s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
        return s;
    }

    function abc() {
        // 班级名称
        var name = $("#name").val();
        if (!name) {
            logger.error('请选择班级名称');
            return false
        }
        // 班级名称
        var name = $("#name").val();
        if (!name) {
            logger.error('请选择班级名称');
            return false
        }
        // 上课时间
        var startTimes = $("#startTimes").val();
        if (!startTimes) {
            logger.error('请选择上课时间');
            return false
        }
        var endTimes = $("#endTimes").val();
        if (!endTimes) {
            logger.error('请选择上课时间');
            return false
        }
        // 上课教室
        var roomId = $("#roomId").val();
        if (!roomId) {
            logger.error('请选择上课教室');
            return false
        }
        // 授课老师
        var empAdminUserId = $("#empAdminUserId").val();
        if (!empAdminUserId) {
            logger.error('请选择授课老师');
            return false
        }
        // 课程次数
        var pitchNumber = $("#pitchNumber").val();
        if (!pitchNumber) {
            logger.error('请填写课程次数');
            return false
        }
        // 课程名称
        var systemPid = $("#systemPid").val();
        if (!systemPid) {
            logger.error('请选择课程名称');
            return false
        }
        // 课程名称
        var courseIdVal = $("#courseId").val();
        if (!courseIdVal) {
            logger.error('请选择课程名称');
            return false
        } else {
            var courseId = $("#courseId").find("option:selected").text();
        }
        // 周几上课
        var selectVal1 = $("[name='selectVal1']").is(":checked");
        if (!selectVal1 == true) {
            logger.error('请选择周几上课');
            return false
        }
        // 课程性质
        var nature = $("#nature").val();
        if (!nature) {
            logger.error('请选择课程性质');
            return false
        }



        $("#calendar").show();
        $(".fc-button-today").click();
        var inputVal = $("#inputDiv").val();
        alert(inputVal)
        var dateInput = new Date(inputVal);
        var week = dateInput.getDay();
        var selectVal = $("#pitchNumber").val();
        alert(selectVal)
        var weekDay = [1, 2, 3, 4, 5, 6, 0];
        var chk_valuue = [];
        $('input[name="selectVal1"]:checked').each(function () {
            chk_valuue.push($(this).attr("oldValue"));
        });
        if (inputVal && Number(selectVal)) {
            var size = $('.event').find('.date').size();
            if (size > 0) {
                $("#calendar").find('.fc-header').remove();
                $("#calendar").find('.fc-content').remove();
                $("#calendar").find('.event').html('');
            }
            var dayArray = [];
            if (chk_valuue.length > 0) {
                for (var k = 0; k < chk_valuue.length; k++) {
                    var chkItem = chk_valuue[k];
                    var weekNewVale = weekDay[chkItem];
                    var len = chk_valuue.length;
                    var num = selectVal / len;
                    var num1 = parseInt(num);
                    var sub = weekNewVale - week;
                    if (num > num1) {
                        var num2 = num1 + 1;
                        if (sub >= 0) {
                            for (var j = 0; j < num2; j++) {
                                var n = (j * 7) + sub;
                                var newYear = getBeforeDate(n, inputVal);
                                dayArray.push(newYear);
                            }

                        } else if (sub < 0) {
                            for (var j = 0; j < num2; j++) {
                                var n = (j * 7) + 7 + sub;
                                var newYear = getBeforeDate(n, inputVal);
                                dayArray.push(newYear);
                            }
                        }

                        function sortNumber(a, b) {
                            var a1 = new Date(a);
                            var b1 = new Date(b);
                            return a1 - b1;
                        }

                        dayArray.sort(sortNumber);//对数组进行排序
                        dayArray.splice(selectVal, 7 * num2 - selectVal);//删除后面多余的元素

                    } else if (num == num1) {
                        if (sub >= 0) {
                            for (var j = 0; j < num1; j++) {
                                var n = (j * 7) + sub;
                                var newYear = getBeforeDate(n, inputVal);
                                dayArray.push(newYear);
                            }

                        } else if (sub < 0) {
                            for (var j = 0; j < num1; j++) {
                                var n = (j * 7) + 7 + sub;
                                var newYear = getBeforeDate(n, inputVal);
                                dayArray.push(newYear);
                            }
                        }
                    }

                }

            } else {
                for (var j = 0; j < selectVal; j++) {
                    var n = j * 7;
                    var newYear = getBeforeDate(n, inputVal);
                    dayArray.push(newYear);
                }
            }
            console.log(dayArray);
            for (var i = 0; i < selectVal; i++) {
                var html = '<input type="hidden" class="date" value="' + dayArray[i] + '"/>';
                $(".event").append(html);
            }
            var myEvents = [];
            $('.event').find(".date").each(function (i, item) {
                myEvents.push({
                    title: '课程',
                    className: 'dateEvent',
                    start: $(this).val(),
                    allDay: true
                });
            })
            $('#calendar').fullCalendar({
                // 头部信息
                header: {
                    left: 'prevYear,nextYear',
                    center: 'title',
                    right: 'today prev,next'
                },
                events: myEvents,
                handleWindowResize: false,
                eventClick: function (calEvent, jsEvent, view) {
                    var selDate = $.fullCalendar.formatDate(calEvent.start, 'yyyy-MM-dd');
                    if (confirm("您确定要删除吗？")) {
                        $(".event").find(".date").each(function () {
                            if ($(this).val() == selDate) {
                                $(this).remove();
                            }
                        });
                        for (var i = 0; i < myEvents.length; i++) {
                            var myEvent = myEvents[i];
                            if (myEvent.start == calEvent.start) {
                                myEvents.splice(i, 1)
                            }
                        }
                        $(this)[0].remove();
                    }
                    zzObj();
                    //  点击后星期选中
                    var weekArr = [];
                    $(".event").find(".date").each(function () {
                        var week = new Date($(this).val()).getDay();
                        if (weekArr.indexOf(week) == -1) {
                            weekArr.push(week)
                        }
                    });
                    $("#checkBoxDiv").find(".chkAll").each(function () {
                        $(this).attr("checked", false);
                    });
                    if (weekArr.length > 0) {
                        $("#checkBoxDiv").find(".chkAll").each(function () {
                            var $input = $(this);
                            var week1 = $input.val();
                            for (var j = 0; j < weekArr.length; j++) {
                                if (week1 == weekArr[j]) {
                                    $input.prop("checked", true);
                                }
                            }
                        });

                    }
                },
                dayClick: function () {
                    var selDate = $(this).data("date");//格式化日期
                    var size = $('.event').find(".date").size();
                    var num = 0;
                    $('.event').find(".date").each(function () {
                        if ($(this).val() == selDate) {
                            num++;
                        }
                    })
                    if (num > 0) {
                        return;
                    }
                    if (size >= selectVal) {
                        alert("课程节数已超出");
                        return;
                    } else {
                        var selDate = $(this).data("date");//格式化日期
                        dayArray.push(selDate);
                        var html = '<input type="hidden" class="date" value="' + selDate + '">';
                        $(".event").append(html);
                        myEvents.push({
                            title: '课程',
                            className: 'dateEvent',
                            start: selDate,
                            allDay: true
                        });
                        $('#calendar').fullCalendar('refetchEvents');
                        //  点击后星期选中
                        var weekArr = [];
                        $(".event").find(".date").each(function () {
                            var week = new Date($(this).val()).getDay();
                            if (weekArr.indexOf(week) == -1) {
                                weekArr.push(week)
                            }
                        });
                        $("#checkBoxDiv").find(".chkAll").each(function () {
                            $(this).attr("checked", false);
                        });
                        if (weekArr.length > 0) {
                            $("#checkBoxDiv").find(".chkAll").each(function () {
                                var $input = $(this);
                                var week1 = $input.val();
                                for (var j = 0; j < weekArr.length; j++) {
                                    if (week1 == weekArr[j]) {
                                        $input.prop("checked", true);
                                    }
                                }
                            });

                        }
                        zzObj()
                    }
                }
            });

            zzObj()

        } else {
            alert("请同时选择开班日期和课程节数")
        }

    }
    //提交表单 组装课程数据
    function zzObj() {
        var classTimeObj = [];
        $(".event").find(".date").each(function () {
            var obj = {};
            var classTime = $(this).val();
            var weekDay = new Date(classTime).getDay();
            obj["classTime"] = classTime;
            obj["weekDay"] = weekDay;
            classTimeObj.push(obj);
        })
        var newObj = JSON.stringify(classTimeObj);
        $("[name='lessonsObject']").val(newObj);
        console.log(newObj);
    }

</script>
<style>
    .basicInfo input[type=radio]:checked + .text:before,
    .basicInfo input[type=checkbox] + .text:before, input[type=radio] + .text:before {
        border-radius: 100%;
    }

    .backgroundColor {
        background: #ccc;
    }
</style>
<div class="col-lg-12 col-sm-12 col-xs-12" style="padding: 0;">
    <div class="modal-header">
        <button type="button" class="bootbox-close-button close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">创建班级</h4>
    </div>
    <div class="modal-body" style="padding-top: 0px!important">
        <label class="row"
               style="margin: 0;padding-top: 20px;padding-left: 15px!important;padding-right: 15px!important;">
            <form class="editForm"  action="${saveUrl}" method="post" responseType="JSON" role="form" style="margin-bottom: 0px!important;"
                  id="editForm_${serializeNum}"
                  data-bv-submitButtons="#editFormSubmitBtn_${serializeNum}"
                  data-bv-message="This value is not valid"
                  data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
                  data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
                  data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">
                <label class="row searchInput" style="margin: 0;">
                    <div class="col-xs-12 nopadding-left nopadding-right">
                        <label class="col-xs-4 nopadding-left nopadding-right" style="margin-bottom: 10px;">
                            <label style="width: 95px;text-align: center">班级名称：</label>
                            <label>
                                <input type="text" name="name" style="width: 160px;height: 30px;border: 1px solid #c6d5d8;border-radius: 4px !important;" id="name">
                            </label>
                        </label>
                        <label class="col-xs-8 nopadding-left nopadding-right" style="margin-bottom: 10px;">
                            <label style="width: 95px;text-align: center">课程体系：</label>
                            <label>
                                <select class="form-select-1 systemPid" name="startTimes" id="systemPid"
                                        style="width: 160px;height: 30px;border: 1px solid #c6d5d8;border-radius: 4px !important;" >
                                    <option>请选择课程体系</option>
                                </select><select class="form-select-1 courseId" name="courseId" id="courseId"
                                                 style="width: 160px;height: 30px;border: 1px solid #c6d5d8;border-radius: 4px !important;" >
                                <option>请选择课程名称</option>
                            </select>
                            </label>
                        </label>
                    </div>
                    <div class="col-xs-12 nopadding-left nopadding-right">
                        <label class="col-xs-4 nopadding-left nopadding-right" style="margin-bottom: 10px;">
                            <label style="width: 95px;text-align: center">课程性质：</label>
                            <label>
                                <select name="nature" class="form-select-1" style="
                                    width:160px;height: 30px;border: 1px solid #c6d5d8;border-radius: 4px !important;" id="nature">
                                    <option value="">请选择</option>
                                    <@dictionary groupCode="nature";dics>
                                    <#list dics as dic>
                                        <option value="${dic.code}">${dic.value}</option>
                                    </#list>
                                </@dictionary>
                                </select>
                            </label>
                        </label>
                        <label class="col-xs-4 nopadding-left nopadding-right" style="margin-bottom: 10px;">
                            <label style="width: 95px;text-align: center">开班日期：</label>
                            <!-- <input  type="text" name="startDate" onFocus="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd'})"
                                    style="height: 30px;" id="inputDiv"/>-->
                            <label>
                                <input data-bv-date-format="YYYY-MM-DD"
                                       data-bv-message="The field is not valid"
                                       data-bv-date-message="请正确输入一个时间" data-bv-date="true" size="10"
                                       name="startDate" alt="开班日期" placeholder="开班日期"
                                       type="text" title="开班日期"
                                       class="form-control date-picker"
                                       onfocus="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd'})"
                                       style="height: 30px;width:160px;border-radius: 4px!important;border: 1px solid #c6d5d8;" id="inputDiv" />
                            </label>
                        </label>
                        <label class="col-xs-4 nopadding-left nopadding-right" style="margin-bottom: 10px;">
                            <label style="width: 95px;text-align: center">上课时间：</label>
                            <label>
                                <input type="text"  class="beginValue Wdate" placeholder="请选择" name="startTimes" id="startTimes"
                                       onFocus="WdatePicker({doubleCalendar:false,dateFmt:'HH:mm'})" style="width: 70px;vertical-align: middle;height: 30px!important;padding-left:3px!important;border: 1px solid #c6d5d8;border-radius: 4px !important;">
                                至
                                <input type="text"  class="beginValue Wdate" placeholder="请选择" name="endTimes" id="endTimes"
                                       onFocus="WdatePicker({doubleCalendar:false,dateFmt:'HH:mm'})" style="width: 70px;vertical-align: middle;height: 30px!important;padding-left:3px!important;border: 1px solid #c6d5d8;border-radius: 4px !important;">
                            </label>
                        </label>
                    </div>
                    <div class="col-xs-12 nopadding-left nopadding-right">
                        <!--<label class="col-xs-4 nopadding-left nopadding-right" style="margin-bottom: 15px;">-->
                            <!--<label style="width: 95px;text-align: center">单节消耗课时：</label>-->
                            <!--<label>-->
                                <!--<select name="expendClassHour" class="form-select-1" id="expendClassHour"-->
                                        <!--style="width:160px;height: 30px;border: 1px solid #c6d5d8;border-radius: 4px !important;"  >-->
                                    <!--<option value="2">2</option>-->
                                <!--</select>-->
                            <!--</label>-->
                        <!--</label>-->
                        <label class="col-xs-4 nopadding-left nopadding-right" style="margin-bottom: 10px;">
                            <label style="width: 95px;text-align: center">上课教室：</label>
                            <label>
                                <select class="form-select-1" name="roomId" id="roomId" style="
                                    width:160px;height: 30px;border: 1px solid #c6d5d8;border-radius: 4px !important;">
                                </select>
                            </label>
                        </label>
                        <label class="col-xs-4 nopadding-left nopadding-right" style="margin-bottom: 10px;">
                            <label style="width: 95px;text-align: center">授课老师：</label>
                            <label>
                                <select class="form-select-1" name="empAdminUserId" id="empAdminUserId"
                                        style="
                                    width:160px;height: 30px;border: 1px solid #c6d5d8;border-radius: 4px !important;" >
                                </select>
                            </label>
                        </label>
                        <label class="col-xs-4 nopadding-left nopadding-right" style="margin-bottom: 10px;">
                            <label style="width: 95px;text-align: center">课程次数：</label>
                            <label>
                                <input name="pitchNumber" alt="课程次数" placeholder="课程次数"
                                       type="text" title="课程次数"
                                       class="form-control"
                                       style="height: 30px;width:160px;border-radius: 4px!important;border: 1px solid #c6d5d8;" id="pitchNumber" />
                            </label>
                        </label>

                    </div>

                    <div class="col-xs-12 nopadding-left nopadding-right padding-bottom-20">
                        <input type="hidden" name="weekDay" class="weekDay">
                        <label class="col-xs-8 nopadding-left nopadding-right">
                            <label style="width: 95px;text-align: center">周几上课：</label>
                            <label class="nomargin" id="checkBoxDiv" onchange="weekDayZZArr()">
                                <label>
                                    <input type="checkbox" name="selectVal1" class="chkAll" value="1" oldValue="0" >
                                    <span class="text">星期一</span>
                                </label>
                                <label>
                                    <input type="checkbox" name="selectVal1" class="chkAll" value="2" oldValue="1">
                                    <span class="text">星期二</span>
                                </label>
                                <label>
                                    <input type="checkbox" name="selectVal1" class="chkAll" value="3" oldValue="2">
                                    <span class="text">星期三</span>
                                </label>
                                <label>
                                    <input type="checkbox" name="selectVal1" class="chkAll" value="4" oldValue="3">
                                    <span class="text">星期四</span>
                                </label>
                                <label>
                                    <input type="checkbox" name="selectVal1" class="chkAll" value="5" oldValue="4">
                                    <span class="text">星期五</span>
                                </label>
                                <label>
                                    <input type="checkbox" name="selectVal1" class="chkAll" value="6" oldValue="5">
                                    <span class="text">星期六</span>
                                </label>
                                <label>
                                    <input type="checkbox" name="selectVal1" class="chkAll" value="0" oldValue="6">
                                    <span class="text">星期日</span>
                                </label>
                            </label>
                        </label>
                        <label>
                            <a style="border-radius: 0px;border: none;background: #ffab00 !important;"
                                    class="btn btn-warning shiny search margin-right-10" unselectable="on" onclick="abc()">
                                <i class="fa fa-search"></i>排课预览
                            </a>
                        </label>
                        <label>
                            <button type="submit" style="border-radius: 0px;border: none;background: #ffab00 !important;"
                                    class="btn btn-warning shiny search margin-right-10" onclick="return checkCount()" id="editFormSubmitBtn_${serializeNum}"><i class="fa fa-search"></i>完成并同步课程表
                            </button>
                        </label>
                    </div>
                </label>
                <input type="hidden" name="lessonsObject" class="lessonsObject">
                <input type="hidden" name="type" value="2">
            </form>
        </label>
    </div>
    <div class="row" style="margin: 0;">
        <div id='calendar' style="display: none">
            <div class="event">
            </div>
        </div>
    </div>

</div>
</div>
<script>
    /**
     * 获取课程体系
     */
    $(function(){
        ajaxRequest("tssCourseController/queryGroupBySystemPid.do",{
            type:2
        }, function (result) {
            var data=result.data;
            var arr=['<option value="">请选择</option>'];
            $.each(data,function(i,t){
                arr.push('<option value="'+t.systemPid+'">'+t.name+'</option>')
            })
            $(".systemPid").html(arr.join(''))
        },function(){
            ajaxError("加载课程体系失败");
        }, "post","json")
    });

    /**
     * 获取课程体系下课程名称
     */
    $(".systemPid").change(function(){
        var nowSelectedProvince=$(this).val();
        ajaxRequest("tssCourseController/queryListBySystemPid.do", {
            systemPid: nowSelectedProvince,
            type:2
        }, function (result) {
            var data=result.data;
            var arr=['<option value="">请选择</option>'];
            $.each(data,function(i,t){
                arr.push('<option value="'+t.id+'">'+t.name+'</option>')
            })
            $(".courseId").html(arr.join(''))

        }, function () {
            ajaxError("加载课程名称失败")
        }, "post", "json")
    });

    $(function(){
        /**
         * 获取教师
         */
        ajaxRequest("sysAdminUserController/getPostListByDuty.do",{
            duty:6
        }, function (result) {
            var data=result.data;
            console.log("---------------")
            console.log(data)
            var arr=['<option value="">请选择</option>']; //<option value="0">请选择</option>
            for (var i = 0; i< data.length; i++) {
                arr.push('<option value="'+data[i].id+'">'+data[i].realName+'</option>')
            }
            console.log(arr)
            $("#empAdminUserId").html(arr.join(''))
        },function(){
            ajaxError("加载员工信息失败");
        }, "post","json");

        /**
         * 获取上班教室
         */
        ajaxRequest("tssClassRoomController/getClassRoomList.do",null, function (result) {
            var data=result.data;
            var arr=['<option value="">请选择</option>']; //<option value="0">请选择</option>
            for (var i = 0; i< data.length; i++) {
                arr.push('<option value="'+data[i].id+'">'+data[i].name+'</option>')
            }
            $("#roomId").html(arr.join(''))
        },function(){
            ajaxError("加载教室信息失败");
        }, "post","json");

    });
    $(".selectpicker_${serializeNum}").select2();
    $("#editForm_${serializeNum}").bind("ajaxSubmitCallback", function (event, result) {
        if (result.resCode == 200) {
            alert("保存成功");
            bootbox.hideAll();
            toView('tssClassesController/tssClassesList.do?type=2   ',true,'POST',{pageSize:10})
        }
    });
//    组装week 数据
    function weekDayZZArr() {
        var weekArr = [];
       $("#checkBoxDiv").find(".chkAll").each(function () {
           if($(this).prop("checked")==true){
               weekArr.push($(this).val())
           }
        })
        $(".weekDay").val(weekArr);
    }

    function checkCount() {
        var selectNum = $("#pitchNumber").val();
        var size = $(".event").find(".date").size();
        if (size == 0) {
            logger.error('请点击排课预览进行排课');
            return false;
        }
        if (size < selectNum) {
            logger.error('课程节数请选择完整');
            return false;
        }
    }
</script>

<script src="assets/js/validation/bootstrapValidator_init.js"></script>




